<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>问卷统计结果</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="../public/css/reset.min.css">
    <link rel="stylesheet" href="../public/css/bootstrap.css">
    <link rel="stylesheet" href="../public/css/index.css">
    <!-- rem s -->
    <script>
        (function (doc, win) {
            var _root = doc.documentElement,
                resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
                resizeCallback = function () {
                    var clientWidth = _root.clientWidth,
                        fontSize = 10 * 10;
                    if (!clientWidth) return;
                    if (clientWidth < 1080) {
                        fontSize = 100 * (clientWidth / 750);
                    } else {
                        fontSize = 100 * (1080 / 750);
                    }
                    _root.style.fontSize = fontSize + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvent, resizeCallback, false);
            doc.addEventListener('DOMContentLoaded', resizeCallback, false);
        })(document, window);
    </script>
    <!-- rem e -->
</head>

<body>
    <div id="ui-view">
        <section class="statistics marginBottomPure" id="statistics">
            <div class="container title">
                <div class="row  marginTop">
                    <div class="col-xs-5 center-block">
                        <img class="img-responsive" src="../public/img/parllay.png" alt="">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-10 text-center">
                        <span>...</span>
                    </div>
                </div>
            </div>
            <div class="container subject fadeIn animated" id="statisticsContainer">
            </div>
            <div class="container subject fadeIn animated" id="resultTemp">
            </div>
        </section>

        <script type="text/template" id="focusTmp">
            <%_.each(defaultData,function(item){%>
                <div class="container">
                    <div class="row col-sm-11">
                        <div class="pull-left">
                            <h4>
                                <%=item.title%>
                            </h4>
                        </div>
                    </div>
                    <div class="row col-sm-11">
                        <%_.each(item.option,function(cur){%>
                            <span><%=cur.name%></span>
                            <span style="float: right;margin-right: 12px;"><%=cur.value%></span>
                            <div class="skillbar clearfix " data-percent=<%=cur.percent%>>
                                <div class="skillbar-bar" style="background: #3498db;"></div>
                                <div class="skill-bar-percent">
                                    <%=cur.percent%>
                                </div>
                            </div>
                            <%})%>
                    </div>
                </div>
                <%})%>
        </script>
        <script type="text/template" id="result">
            <%console.log(result)%>
                <div class="row">
                    <span class="col-xs-11 "><p>经计算：</p></span>
                    <span class="col-xs-11 "></span>
                    <span class="col-xs-11 "><p>每月可能有<%=result.percent%>的流量丢失</p></span>
                    <span class="col-xs-11 "><p>评分：<%=result.score%></p></span>
                    <span class="col-xs-11 "><p>排名：<%=result.rank%></p></span>
                </div>
                <div class="container" id="pieChartContainer">
                    <div id="pieChart" class="col-sm-10 text-center">
                        <%=result.percent%>
                    </div>
                    <div class="row marginBottomPure">
                        <div class="col-xs-6">
                            <lable class="pull-right"><span class="flow "></span>总流量</lable>
                        </div>
                        <div class="col-xs-6">
                            <lable class="pull-left"><span class="lostFlow clearfix"></span>丢失流量</lable>
                        </div>
                    </div>
                </div>
                <div class="row col-sm-10 marginTop marginBottomPure">
                    <span>想避免流量丢失？赶紧使用 <a href="http://crm-lite.parllay.cn" class="">烽火台Lite版</a> 为新增粉丝提供自动化 “智能补量” 吧！保证粉丝杠杠的。</span>
                </div>
        </script>
    </div>
    <script src="../public/lib/jquery-1.9.1.min.js"></script>
    <script src="../public/lib/underscore-min.js"></script>
    <script src="../public/lib/bootstrap.js"></script>
    <script src="../public/js/report.js"></script>
</body>

</html>